<template>
	<view class="container">
		<u-toast ref="uToast" />
		<u-navbar :is-back="true" back-icon-color='#333333' height="" :border-bottom="false" height="50">
			<view class="" style="width: 555rpx; margin-left:40rpx;">
				<u-search v-model="keyword" placeholder="请输入搜索内容" style="width: 555rpx;" :show-action="showAction"
					height="56" :action-style="{color: '#fff'}"></u-search>
			</view>
			<view class="" style=" display: flex;align-content: center; color:#2f96fe; font-size: 30rpx;"
				@click="navigate_path">
				{{complete}}
			</view>
		</u-navbar>
		<view class="top">
			<view class="topBox">
				<view v-for="(topItem,topIndex) of quanbu" :key="topIndex" :data-name="topIndex" @click="changeIndex"
					:class="[activeIndex==topIndex?'con':'']">
					<text></text>
					{{topItem}}
				</view>
			</view>
		</view>
		<view class="blank" style="width: 100%; background-color: #F2F2F2; height: 20rpx;">
		</view>
		<view class="" v-show="activeIndex==0">
			<view class="entire">
				<view class="">
					全部
				</view>
				<view class="" @click.stop="getAll">
					<text>全选</text>
					<text class="iconfont icon-duigou" style="color:#2f96fe;font-size:30rpx;"
						v-show="grade_entire"></text>
				</view>
			</view>
			<view class="grade_list">
				<view class="grade">
					<view class="" v-for="(item,index) in grades_arr" :key="index" @click="change_sub(index)"
						:id="[index==num?'sub':'']">
						{{item.label}}
					</view>
				</view>
				<view id="teacher">
					<view class="all_teacher" v-for="(i,j) in grades_arr[num].children" :key="j"
						@click="change_teacher(num,j)">
						<text>{{i.label}}</text>
						<text class="iconfont icon-duigou" style="color:#2f96fe;font-size:30rpx;"
							v-show="i.boolen"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-show="activeIndex==1">
			<view class="entire">
				<view class="">
					全部
				</view>
				<view class="" @click.stop="getAll">
					<text>全选</text>
					<text class="iconfont icon-duigou" style="color:#2f96fe;font-size:30rpx;"
						v-show="class_entire"></text>
				</view>
			</view>
			<view class="grade_list">
				<view class="grade">
					<view class="" v-for="(item,index) in subject_arr" :key="index" @click="change_sub(index)"
						:id="[index==class_num?'sub':'']">
						{{item.label}}
					</view>
				</view>
				<view id="teacher">
					<view class="all_teacher" v-for="(i,j) in subject_arr[class_num].children" :key="j"
						@click="change_teacher(class_num,j)">
						<text>{{i.label}}</text>
						<text class="iconfont icon-duigou" style="color:#2f96fe;font-size:30rpx;"
							v-show="i.boolen"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../request.js'
	export default {
		data() {
			return {
				keyword: '',
				complete: '完成',
				num: 0,
				class_num: 0,
				department_num: 0,
				role_num: 0,
				showAction: true,
				activeIndex: 0,
				grade_list: [],
				quanbu: ['年级', '科组', '部门', '角色'],
				grade_entire: false,
				class_entire: false,
				department_entire: false,
				role_entire: false,

				grades_arr: [{
					children: [],
					value: "",
					label: '',
				}], //年级
				subject_arr: [{
					children: [],
					value: "",
					label: '',
				}], //科组
				department_arr: [{
					children: [],
					value: "",
					label: '',
				}], //部门
				role_arr: [{
					children: [],
					value: "",
					label: '',
				}], //角色	
				select_arr: [],
				select_user: [],
			}
		},
		onLoad() {
			//进来的同时获取所有不同种类列表的数据
			this.gradeLists();
			this.groupLists();
		},
		methods: {
			changeIndex(e) {
				console.log(e.currentTarget.dataset.name);
				let index = e.currentTarget.dataset.name;
				this.activeIndex = index;
			},
			getAll() {
				console.log('进来吗')
				switch (this.activeIndex) {
					case 0: 
						this.grade_entire = !this.grade_entire;
						if (this.grade_entire) {
							for (let i = 0; i < this.grades_arr.length; i++) {
								for (let j = 0; j < this.grades_arr[i].children.length; j++) {
									this.grades_arr[i].children[j].boolen = true;
								}
							}
						} else {
							for (let i = 0; i < this.grades_arr.length; i++) {
								for (let j = 0; j < this.grades_arr[i].children.length; j++) {
									this.grades_arr[i].children[j].boolen = false;
								}
							}
						}
						break;
					case 1:
						this.class_entire = !this.class_entire;
						if (this.class_entire) {
							for (let i = 0; i < this.subject_arr.length; i++) {
								for (let j = 0; j < this.subject_arr[i].children.length; j++) {
									this.subject_arr[i].children[j].boolen = true;
								}
							}
						} else {
							for (let i = 0; i < this.subject_arr.length; i++) {
								for (let j = 0; j < this.subject_arr[i].children.length; j++) {
									this.subject_arr[i].children[j].boolen = false;
								}
							}
						}
						break;
					case 2:
						this.department_entire = !this.department_entire;
						break;
					case 3:
						this.role_entire = !this.role_entire;
						break;
				}
			},
			change_sub(param) {
				switch (this.activeIndex) {
					case 0:
						this.num = param;
						break;
					case 1:
						this.class_num = param;
						break;
					case 2:
						this.department_num = param;
						break;
					case 3:
						this.role_num = param;
						break;
				}

			},
			navigate_path() {
				let str = '';
				let select_id = '';
				for (let i = 0; i < this.grades_arr.length; i++) {
					for (let j = 0; j < this.grades_arr[i].children.length; j++) {
						if (this.grades_arr[i].children[j].boolen) {
							this.select_arr.push(this.grades_arr[i].children[j].label);
							this.select_user.push(this.grades_arr[i].children[j].value);
						}
					}
				}
				for (let k = 0; k < this.subject_arr.length; k++) {
					for (let l = 0; l < this.subject_arr[k].children.length; l++) {
						if (this.subject_arr[k].children[l].boolen) {
							this.select_arr.push(this.subject_arr[k].children[l].label);
							this.select_user.push(this.subject_arr[i].children[j].value);
						}
					}
				}
				console.log(str);
				str = this.select_arr.join(',');
				select_id = this.select_user.join(',');
				this.$toLink('../compose_email/compose_email', {
					id: str,
					selectUserId: select_id,
				}, 2);
			},
			change_teacher(param1, param2) {
				switch (this.activeIndex) {
					case 0:
						this.grades_arr[param1].children[param2].boolen = !this.grades_arr[param1].children[param2]
							.boolen;
						break;
					case 1:
						this.subject_arr[param1].children[param2].boolen = !this.subject_arr[param1].children[param2]
							.boolen;
						break;
					case 2:
						break;
					case 3:
						break;
				}
			},
			//获取年级
			gradeLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/classes/gradeLists',
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data.data);
							res.data.data.forEach((item, index) => {
								_this.grades_arr.push({
									label: item.name,
									value: item.grade_id,
									children: []
								})
								_this.gradeTeacherLists(item.grade_id, index);
							})
							//因为原有数组存在一个不需要的元素所以获取之后将第一个删除
							_this.grades_arr.shift();
							console.log(_this.grades_arr);

						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			gradeTeacherLists(param1, param2) {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/general/gradeTeacherLists',
					data: {
						grade_id: param1
					},
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data.data);
							res.data.data.data.forEach(item => {
								_this.grades_arr[param2].children.push({
									label: item.full_name,
									value: item.teacher_id,
									boolen: false,
								})
							})

						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			//获取科组
			groupLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/general/groupLists',
					method: 'post',
					data: {
						school_district_id: uni.getStorageSync('school_district_id')
					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							res.data.data.forEach((item, index) => {
								_this.subject_arr.push({
									label: item.name,
									value: item.subject_id,
									children: []
								})
								_this.groupUserLists(item.subject_id, index);
							})
							//因为原有数组存在一个不需要的元素所以获取之后将第一个删除
							_this.subject_arr.shift();
							console.log(_this.subject_arr);

						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			groupUserLists(param1, param2) {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/general/groupUserLists',
					data: {
						subject_id: param1,
					},
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data.data);
							res.data.data.data.forEach(item => {
								_this.subject_arr[param2].children.push({
									label: item.teacher_info ? item.teacher_info.full_name : '',
									value: item.teacher_user_id,
									boolen: false,
								})
							})

						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			//获取部门列表
			departmentLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/general/departmentLists',
					method: 'post',
					data: {
						school_district_id: uni.getStorageSync('school_district_id')
					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data);
							res.data.data.forEach((item, index) => {
								_this.department_arr.push({
									label: item.name,
									value: item.subject_id,
									children: []
								})
								_this.departmentTeacherLists(item.subject_id, index);
							})
							//因为原有数组存在一个不需要的元素所以获取之后将第一个删除
							_this.department_arr.shift();
							console.log(_this.department_arr);

						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			departmentTeacherLists(param1, param2) {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/general/departmentTeacherLists',
					data: {
						department_id: param1,
					},
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data.data);
							res.data.data.data.forEach(item => {
								_this.subject_arr[param2].children.push({
									label: item.teacher_info ? item.teacher_info.full_name : '',
									value: item.teacher_user_id,
									boolen: false,
								})
							})

						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		overflow: hidden;

		.top {
			width: 100%;
			height: 65rpx;
			background: #fff;
			overflow: hidden;
			margin-top: 30rpx;

			.topBox {
				width: 100%;
				height: 65rpx;
				background: #fff;
				position: relative;
				display: flex;
				justify-content: space-evenly;

				view {
					height: 65rpx;
					line-height: 65rpx;
					width: 120rpx;
					text-align: center;
					font-size: 30rpx;
					color: #fff;
					color: #333333;

					text {
						display: none;
					}


				}

				.con {
					position: relative;
					height: 65rpx;
					line-height: 65rpx;
					color: #2f96fe;
					width: 120rpx;

					text {
						display: block !important;
						position: absolute;
						width: 120rpx;
						height: 4rpx;
						background: #2f96fe;
						bottom: 0rpx;
						left: 0rpx;
					}
				}

			}
		}

		.entire {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			height: 79rpx;

			view {
				&:nth-child(1) {
					width: 226rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #e5e5e5;
					border-right: 1rpx solid #e5e5e5;
					text-align: center;
					line-height: 79rpx;
					font-size: 30rpx;
					background: #F9F8F8;
					color: #666666;
				}

				&:nth-child(2) {
					width: 524rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #e5e5e5;
					line-height: 79rpx;
					font-size: 26rpx;
					display: flex;
					justify-content: flex-start;
					color: #666666;

					text {
						&:nth-child(1) {
							margin-left: 26rpx;

						}

						&:nth-child(2) {
							margin-left: 315rpx;

						}
					}

				}
			}
		}

		.grade_list {
			width: 100%;
			display: flex;
			justify-content: flex-start;

			.grade {
				width: 226rpx;

				#sub {
					width: 100%;
					height: 79rpx;
					background-color: #fff;
					line-height: 79rpx;
					text-indent: 1em;
					border-bottom: 1rpx solid #e5e5e5;
					border-right: none;
					color: #2f96fe;
					box-sizing: border-box;
					font-size: 30rpx;
				}

				view {
					width: 100%;
					height: 79rpx;
					background-color: #f9f8f8;
					line-height: 79rpx;
					text-indent: 1em;
					border-bottom: 1rpx solid #e5e5e5;
					border-right: 1rpx solid #e5e5e5;
					color: #666666;
					box-sizing: border-box;
					font-size: 30rpx;
				}
			}

			#teacher {
				width: 524rpx;

				.all_teacher {
					width: 100%;
					height: 79rpx;
					line-height: 79rpx;
					background: #fff;
					box-sizing: border-box;
					border-bottom: 1rpx solid #e5e5e5;
					text-indent: 1em;
					display: flex;
					justify-content: flex-start;
					color: #666666;
					font-size: 26rpx;

					text {
						&:nth-child(1) {
							font-size: 26rpx;
							margin-left: 8rpx;
							width: 248rpx;
						}

						&:nth-child(2) {
							margin-left: 115rpx;

						}
					}
				}

			}
		}
	}
</style>
